<template>
  <div>
    <a-table
      class="ant-table-striped"
      :dataSource="dataSource"
      :columns="columns"
      @change="handleTableChange"
      bordered
      :expand-column-width="100"
      :scroll="{ x: 1500, y: 300 }"
      :row-selection="rowSelection"
      @resizeColumn="handleResizeColumn"
      size="small"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'action'">
          <a>Delete</a>
        </template>
      </template>
      <template #expandedRowRender="{ record }">
        <p style="margin: 0">
          {{ record.description }}
        </p>
      </template>
      <template #expandColumnTitle>
        <span style="color: red">More</span>
      </template>

    </a-table>
    <a-table
      class="ant-table-striped"
      size="middle"
      :columns="columns1"
      :data-source="data1"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    >
      <template #summary>
        <a-table-summary-row>
          <a-table-summary-cell>Total</a-table-summary-cell>
        </a-table-summary-row>
      </template>
    </a-table>
  </div>
</template>

<script>
const sharedOnCell = (_, index) => {
  if (index === 4) {
    return {
      colSpan: 0,
    };
  }
};
import { computed, ref, unref } from 'vue';
import { Table } from 'ant-design-vue';
export default {
  name: '',
  components: {},
  data() {
    return {

      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',

          width: 150,
          resizable: true,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          width: 150,
          responsive: ['md'],
          resizable: true,

        },
        {
          title: 'Address',
          dataIndex: 'address',
          width: '30%',
          key: 'address',
        },
        {
          title: 'Action',
          key: 'action',
          fixed: 'right',
        },
      ],
      dataSource: [
        {
          key: 1,
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
        },
        {
          key: 2,
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
        },
        {
          key: 3,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
        }, {
          key: 3,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
        }, {
          key: 3,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
        }, {
          key: 3,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
        },
      ],
      selectedRowKeys: [],
      rowSelection: {
        checkStrictly: true,
        selectedRowKeys: unref(this.selectedRowKeys),
        hideDefaultSelections: true,
        selections: [
          Table.SELECTION_ALL,
          Table.SELECTION_INVERT,
          Table.SELECTION_NONE,
        ],
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows);
        },
      },

      columns1: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
      ],
      data1: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
        {
          key: '4',
          name: 'Ben Kang',
          age: 15,
          address: 'Sidney No. 1 Lake Park',
        },
      ],

    }
  },
  created() { },
  mounted() { },
  methods: {
    handleTableChange(pag, filters, sorter) {
      console.log(pag, filters, sorter, 1111);
    },
    handleResizeColumn(w, col) {
      col.width = w;
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
// .ant-table-striped :deep(.table-striped) td {
//   background-color: rgb(29, 29, 29);
// }
</style>
